import { reactive, ref } from 'vue'
import icon1 from '../../assets/images/chuxian.svg'
import icon2 from '../../assets/images/weibao.svg'
import icon3 from '../../assets/images/xinnengyuan.svg'
import cxjl from '../../assets/images/renwuchaxun.png'
import wdye from '../../assets/images/chuqing.png'
import grzx from '../../assets/images/laweichaxun.png'
import sqkp from '../../assets/images/jiaqiandayin.png'
import { QUERY_REPORT_TYPE } from '@/utils/config'
import { getWalletInfo } from '@/apis/home'
import useJudgeLogin from '@/utils/judgeLogin'
import { BasicData } from '@/utils/basicData'
import { noticeAtHome } from '@/apis/notice'

const fnList = reactive([
    {
        img: icon1,
        title: '出险车况',
        describe: '查询出险维修、损失情况，车况一览无余，全国通用',
        buttonTxt: '去查询',
        skip: '/vehicle-condition/detection',
        isNEW: false
    },
    {
        img: icon2,
        title: '维保车况',
        describe: '提供车辆日常维护、保养等信息，目前支持上海地区查询，后期将逐步开放全国通用',
        buttonTxt: '去查询',
        skip: '/vehicle-condition/detection',
        isNEW: false
    },
    {
        img: icon3,
        title: '新能源车况',
        describe: '提供查询电池损耗程度、电池组安全性能，全国通用',
        buttonTxt: '去查询',
        skip: '/vehicle-condition/detection',
        isNEW: false
    }
])

//滚动消息接口
interface MessageItem {
    title: string
    time: string
    id?: string
}

export class IndexData extends BasicData {
    list = reactive(fnList)
    confirmPopup = reactive({
        visible: false,
        title: '温馨提示',
        content: '由于公司机房搬迁升级中，暂时无法提供服务，请稍后再试。',
        orderId: ''
    })
    //用户钱包信息
    walletInfo: any = reactive({
        remainAmount: 0,
        productRemainFreeCountMap: new Map(), //充值赠送次数
        productSystemRemainFreeCountMap: new Map(), //系统免费试用次数
        productRemainNumberPackageCountMap: new Map(), //套餐包
        total: 0,
        remainFreeCount: 0,
        remainConvertCount: 0 //出险车况充值折算次数
    })
    //默认是管理员
    isAdmin = ref(true)
    //滚动消息列表
    rollMsgList: MessageItem[] = reactive([])
    otherService = reactive([
        { icon: cxjl, label: '查询记录', visible: true, value: '', link: '/vehicle-condition/query-record' },
        {
            icon: wdye,
            label: '剩余次数', //只展示出险车况的
            // visible: this.uStore.isAdmin && this.uStore.loginStatus,
            visible: true,
            value: '0次',
            link: '/wallet'
        },
        { icon: grzx, label: '个人中心', visible: true, value: '', link: '/personal-center' },
        { icon: sqkp, label: '申请开票', visible: true, value: '', link: '/invoice' }
    ])
    constructor() {
        super()
        this.isAdmin.value = this.uStore.isAdmin
        console.log('this.uStore.isAdmin', this.uStore.isAdmin, this.uStore.loginStatus)
        this.init()
    }

    init() {
        if (this.uStore.loginStatus) {
            //获取用户钱包
            getWalletInfo().then((res: any) => {
                if (res.data.value === 200) {
                    /**
                     * 删除 {和 }字符串开头和结尾的字符。不要使用 replace以防其中有任何事件。
                     * 将结果拆分为形成键值对的每个离散 block 。
                     * 将它们拆分为实际的键和值
                     * 结果可以很容易地转换为 Map，因为构造函数 takes an array where each item is an array with two items并将其转换为第一项为键，第二项为值的映射:
                     */
                    //充值赠送次数
                    const productRemainFreeCountKeyValuePairs = res.data.data.productRemainFreeCount
                        .slice(1, -1)
                        .split(/\s*,\s*/)
                        .map((chunk: any) => chunk.split(':'))
                    this.walletInfo.productRemainFreeCountMap = new Map(productRemainFreeCountKeyValuePairs)

                    //系统免费试用次数
                    const productSystemRemainFreeCountMapKeyValuePairs = res.data.data.productSystemRemainFreeCountMap
                        .slice(1, -1)
                        .split(/\s*,\s*/)
                        .map((chunk: any) => chunk.split(':'))
                    this.walletInfo.productSystemRemainFreeCountMap = new Map(
                        productSystemRemainFreeCountMapKeyValuePairs
                    )

                    //套餐次数包
                    const productRemainNumberPackageCountMapKeyValuePairs =
                        res.data.data.productRemainNumberPackageCountMap
                            .slice(1, -1)
                            .split(/\s*,\s*/)
                            .map((chunk: any) => chunk.split(':'))
                    this.walletInfo.productRemainNumberPackageCountMap = new Map(
                        productRemainNumberPackageCountMapKeyValuePairs
                    )

                    this.walletInfo.remainConvertCount = res.data.data.remainConvertCount

                    this.walletInfo.total =
                        (Number(this.walletInfo.productRemainFreeCountMap.get('1')) || 0) +
                        (Number(this.walletInfo.productRemainFreeCountMap.get('2')) || 0) +
                        (Number(this.walletInfo.productRemainFreeCountMap.get('3')) || 0) +
                        (Number(this.walletInfo.productSystemRemainFreeCountMap.get('1')) || 0) +
                        (Number(this.walletInfo.productSystemRemainFreeCountMap.get('2')) || 0) +
                        (Number(this.walletInfo.productSystemRemainFreeCountMap.get('3')) || 0) +
                        (Number(this.walletInfo.productRemainNumberPackageCountMap.get('1')) || 0) +
                        (Number(this.walletInfo.productRemainNumberPackageCountMap.get('2')) || 0) +
                        (Number(this.walletInfo.productRemainNumberPackageCountMap.get('3')) || 0) +
                        (Number(this.walletInfo.remainConvertCount) || 0)

                    this.walletInfo.remainAmount = res.data.data.remainAmount
                    this.walletInfo.remainFreeCount = res.data.data.remainFreeCount

                    this.otherService[1].value = this.walletInfo.total + '次'
                }
            })
        }
        //获取首页滚动公告
        noticeAtHome().then(res => {
            if (res.data.value === 200) {
                const arr: MessageItem[] = []
                res.data.data.records.forEach((item: any) => {
                    arr.push({ title: item.title, time: item.releaseTime.split(' ')[0], id: item.id })
                })
                this.rollMsgList.push(...arr, ...arr)
            }
        })
    }

    /**
     * 打卡对应页面
     * @param path
     */
    onOpenPage(index: number, type: string) {
        console.log(index)
        useJudgeLogin.init(() => {
            if (type === 'fn') {
                if (this.list[index].skip === '') {
                    this.confirmPopup.visible = true
                } else {
                    this.router.push({ path: this.list[index].skip, query: { type: QUERY_REPORT_TYPE[index + 1] } })
                }
            } else if (type === 'service') {
                if (this.otherService[index].link !== '') {
                    this.router.push({ path: this.otherService[index].link })
                }
            }
        })
    }
    //打开消息页面
    openMessage = () => {
        this.router.push('/message/list')
    }
}
